<template>
  <a-modal
    title="选择颜色"
    width="1100px"
    :visible.sync="visible"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <div class="axis">
      <ul class="x">
        <li />
        <li
          v-for="(item, index) in colorArr"
          :key="'x' + index"
          :title="item.title"
          :style="{
            background: item.bgColor,
            color: item.highlightColor && '#fff'
          }"
        >
          {{ item.name }}
        </li>
      </ul>
      <ul v-for="(item, index) in colorArr" :key="'y' + index" class="y">
        <li
          :title="item.title"
          :style="{
            background: item.bgColor,
            color: item.highlightColor && '#fff'
          }"
        >
          {{ item.name }}
        </li>
        <li
          v-for="(v, i) in colorArr"
          :key="'y' + i + v"
          :class="['item', checkColor === v.name + item.name && 'active']"
          :style="[
            checkColor &&
              checkColor[0] === v.name && { background: 'rgba(0,0,0,5%)' },
            checkColor &&
              checkColor[1] === item.name && { background: 'rgba(0,0,0,5%)' },
            checkColors.includes(v.name + item.name) && {
              fontWeight: 'bold',
              color: '#fff',
              background: 'gray'
            }
          ]"
          @click="
            !checkColors.includes(v.name + item.name) &&
              changeColor(v.name + item.name)
          "
        >
          <span
            :style="
              checkColor === v.name + item.name &&
              checkColor[0] === v.name && {
                color: v.highlightColor && '#fff',
                background: v.bgColor
              }
            "
            >{{ v.name }}</span
          >
          <span
            :style="
              checkColor === v.name + item.name &&
              checkColor[1] === item.name && {
                color: item.highlightColor && '#fff',
                background: item.bgColor
              }
            "
            >{{ item.name }}</span
          >
        </li>
      </ul>
    </div>
  </a-modal>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    checked: {
      type: String,
      default: ''
    },
    checkColors: {
      type: Array,
      default: () => []
    },
    colorOpts: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      checkColor: this.checked
    }
  },
  computed: {
    colorArr() {
      const colorArr = this.colorOpts.map(item => {
        return {
          title: item.description,
          name: item.code,
          bgColor:
            item.remarks.length > 7
              ? item.remarks.slice(0, item.remarks.length - 1)
              : item.remarks,
          highlightColor: item.remarks.length > 7
        }
      })
      return colorArr
    }
  },
  methods: {
    handleOk() {
      this.$emit('changeColor', this.checkColor)
      this.handleCancel()
    },
    changeColor(val) {
      this.checkColor = val
    },
    handleCancel() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style lang="less" scoped>
.axis {
  width: max-content;
  margin: auto;
}
ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.x,
.y {
  display: flex;
}
li {
  width: 46px;
  line-height: 24px;
  text-align: center;
}
.item {
  display: flex;
  justify-content: center;
}
.item:hover {
  font-weight: bold;
  cursor: pointer;
}
.active {
  font-weight: bold;
  span {
    flex: 1;
  }
}
</style>
